<template>
<!-- 选择场次 -->
  <view class="tickets-sku-round sku-choose-block" v-if="roundList && roundList.length > 0">
    <view class="sku-choose-block-title"><basic-icons name="icon-time" size="32rpx" padding="0 6rpx 0 0"/>场次</view>
    <view class="round-list">
      <view 
      v-for="(round, index) in roundList"
      :key="index"
      class="round-item"
      :class="{active: roundIndex == index}"
      @click="clickRound(index)" >{{round.name}}</view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'tickets-sku-round',

  props: {
    value: {
      type: Number,
      default: 0
    },
    roundList: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    value(val, oldVal) {
      this.roundIndex = val
    }
  },

  data() {
    return {
      roundIndex: 0
    }
  },

  methods: {
    clickRound(index) {
      this.$emit('input', index)
    }
  }
}
</script>
<style lang="less">
.tickets-sku-round{
  .round-list {
    display: flex;
    flex-wrap: wrap;
    max-height: 50%;

    .round-item {     
      .line-ellipsis;

      min-width: 200rpx;
      height:64rpx;
      line-height: 64rpx;
      padding:0 20rpx;
      margin-right:20rpx;
      margin-top:20rpx;
      
      font-size:28rpx;
      color: @font_color;
      text-align: center;

      background: #ffffff;
      border: 1rpx solid #F1F4F9; 
      border-radius: 10rpx;
      box-sizing: border-box;       
      // &:nth-child(4n){
      //   margin-right:0 !important;
      // }
      &.active{
        color: @theme_color;
        border:1px solid @theme_color;
        background: fade(@theme_color, 5%);
      }
    }      
  }
}
</style>